<template>
    <div class="details-wrap">
        <h3>资源名称：{{ store.state.Datalist.resourcemc }}</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th style="width: 5%; background: #f1f1f1">资源名称：</th>
                    <td style="width: 15%; background: #fff" colspan="3">
                        {{ store.state.Datalist.resourcemc }}
                    </td>
                </tr>
                <!-- <tr>
          <th style="width: 5%; background: #f1f1f1">资源对象：</th>
          <td style="width: 15%; background: #fff" colspan="3">
            {{ store.state.Datalist.resourcesjdx }}
          </td>
        </tr> -->
                <tr>
                    <th style="width: 5%; background: #f1f1f1">资源编码：</th>
                    <td style="width: 15%; background: #fff" colspan="3">
                        {{ store.state.Datalist.resourcebm }}
                    </td>
                </tr>
                <tr>
                    <th style="width: 5%; background: #f1f1f1">
                        资源来源名称：
                    </th>
                    <td style="width: 15%; background: #fff">
                        {{ store.state.Datalist.resourcefl }}
                    </td>
                    <th style="width: 5%; background: #f1f1f1">资源目录：</th>
                    <td style="width: 15%; background: #fff">
                        {{ store.state.Datalist.catalogName }}
                    </td>
                </tr>
                <tr>
                    <th style="width: 5%; background: #f1f1f1">所属区划：</th>
                    <td style="width: 15%; background: #fff" colspan="3">
                        {{ store.state.Datalist.xzqhName }}
                    </td>
                </tr>
                <!-- <tr>
          <th style="width: 5%; background: #f1f1f1">服务类型：</th>
          <td style="width: 15%; background: #fff" colspan="3">
            {{ store.state.Datalist.fwlxName }}
          </td>
        </tr> -->
                <tr>
                    <th style="width: 5%; background: #f1f1f1">服务地址：</th>
                    <td style="width: 15%; background: #fff" colspan="3">
                        {{ store.state.Datalist.fwdz }}
                    </td>
                </tr>
                <tr>
                    <th style="width: 5%; background: #f1f1f1">坐标系：</th>
                    <td style="width: 15%; background: #fff" colspan="3">
                        {{ store.state.Datalist.zbxName }}
                    </td>
                </tr>
                <tr>
                    <th style="width: 5%; background: #f1f1f1">比例尺：</th>
                    <td style="width: 15%; background: #fff" colspan="3">
                        {{ store.state.Datalist.blName }}
                    </td>
                </tr>
                <tr>
                    <th style="width: 5%; background: #f1f1f1">分辨率：</th>
                    <td style="width: 15%; background: #fff" colspan="3">
                        {{ store.state.Datalist.fblName }}
                    </td>
                </tr>
                <!-- <tr>
          <th style="width: 5%; background: #f1f1f1">空间范围：</th>
          <td style="width: 15%; background: #fff" colspan="3">
            {{ store.state.Datalist.kjfw }}
          </td>
        </tr> -->
                <!-- <tr>
          <th style="width: 5%; background: #f1f1f1">获取时间：</th>
          <td style="width: 15%; background: #fff" colspan="3">
            {{ store.state.Datalist.kqsj }}
          </td>
        </tr> -->
                <tr>
                    <th style="width: 5%; background: #f1f1f1">注册时间：</th>
                    <td style="width: 15%; background: #fff" colspan="3">
                        {{ store.state.Datalist.regdate }}
                    </td>
                </tr>
                <tr>
                    <th style="width: 5%; background: #f1f1f1">资源提供方：</th>
                    <td style="width: 15%; background: #fff">
                        {{ store.state.Datalist.deptname }}
                    </td>
                    <th style="width: 5%; background: #f1f1f1">更新周期：</th>
                    <td style="width: 15%; background: #fff">
                        {{ store.state.Datalist.gxzqName }}
                    </td>
                </tr>
                <tr>
                    <th style="width: 5%; background: #f1f1f1">资源数据量：</th>
                    <td style="width: 15%; background: #fff"></td>
                    <th style="width: 5%; background: #f1f1f1">访问次数：</th>
                    <td style="width: 15%; background: #fff">
                        {{ store.state.Datalist.visitcount }}
                    </td>
                </tr>
                <tr>
                    <th style="width: 5%; background: #f1f1f1">资源标签：</th>
                    <td style="background: #fff" colspan="7" align="left">
                        <a
                            href="javascript: void(0);"
                            class="btn btn-xs btn-default"
                        >
                            {{ store.state.Datalist.keyword }}
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import { useStore } from "@/store";
export default {
    created() {},
    data() {
        return {
            store: useStore(),
        };
    },
};
</script>

<style lang="less" scoped>
.details-wrap {
    padding: 16px;
    background-color: #fff;
    .table-bordered {
        border: 1px solid #ebebeb;
    }
    .table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    tr th {
        font-weight: 600;
        width: 5%;
        background: #f1f1f1;
    }
    tr td {
        width: 15%;
        background: #fff;
    }
    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
        border-top: 1px solid #e7eaec;
        line-height: 1.42857;
        padding: 8px;
        vertical-align: middle;
    }
    .table-bordered > tbody > tr > td,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > td,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > thead > tr > th {
        border: 1px solid #ddd;
    }
}
.btn-default {
    margin-left: 10px;
}
.btn {
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    color: #444;
    padding: 1px 5px;
    margin-bottom: 5px;
    font-size: 12px;
    border-radius: 3px;
}
</style>